import React from "react";
import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
import PageHeader from "@/components/PageHeader";
import {  ControllerType } from "@/components/items-list/ItemsList";
import {Button, Col, Form, Input, Row, Table, ConfigProvider, Layout, Tree,Modal} from "antd/lib";
import zhCN from 'antd/es/locale/zh_CN';
import GlobalSetting from "@/services/globalsetting";
import notification from "@/services/notification";
import {get} from "lodash";
// import { createHashHistory } from 'history';
// const hashHistory = createHashHistory();

import Enums from "@/services/enums";
import CreateGlobalSettingDialog from "@/components/contract/settings/GlobalSettingDialog";
import navigateTo from "@/components/ApplicationArea/navigateTo";
import routes from "@/services/routes";

const {Sider } = Layout;
const { confirm } = Modal;
class GlobalSettingList extends React.Component {
  state = {
    page: 1,
    pagesize: 10,
    total:10,
    loading: false,
    code: '',
    type: '',
    data: [],
  };
  static propTypes = {
    controller: ControllerType.isRequired,
  };
    items=[{
      name:"cght",
      slug:"imgs",
      tags:"tags",
      is_draft:"df",
      is_archived:true
    }];
  componentWillMount() {
    let param={
      page: this.state.page,
      pagesize: this.state.pagesize,
      code: this.state.code,
      type: this.state.type,
    }
    this.fetch(param);
  }
  fetch = (params = {}) => {
    this.setState({ loading: true });
    GlobalSetting.getlist(params).then(data => {
        this.setState({
            loading: false,
            data:data.data,
            page: params.page,
            pagesize: params.pagesize,
            total: data.total,
        });
    });
  };
  handlesel = () => {
    let param={
      page: 1,
      pagesize: this.state.pagesize,
      code: this.state.code,
      type: this.state.type,
    }
    this.fetch(param);
  };
   handleTableChange = (pagination, filters, sorter) => {
    let field=sorter.field;
    let order=0;
    if(sorter.order==="descend"){
      order=1;
    }
    let param={
      field: field,
      order: order,
      page: pagination.current,
      pagesize: pagination.pageSize,
      code: this.state.code,
      type: this.state.type,
    }
    this.fetch(param);
  };

  handleUpdate = record => {
            let param={
                  page: this.state.page,
                  pagesize: this.state.pagesize,
                  code: this.state.code,
                  type: this.state.type,
            }
    CreateGlobalSettingDialog.showModal({globalsetting: record})
    .onClose((result = {}) => {
        if (result.success) {
            this.fetch(param);
        }
      }).onDismiss(() => {
        navigateTo("globalsetting", true);
      });
  };
onDragEnter = info => {
    console.log(info);
  };
  render() {
    // const { currentPage } = this.state;
      const paginationProps = {
            showSizeChanger: true,
            // showQuickJumper: true,
            total: this.state.total, // 数据总数
            pageSize: parseInt(this.state.pagesize), // 每页条数
            current: parseInt(this.state.page), // 当前页码
            pageSizeOptions: ["10", "20", "30","100"],
            showTotal: ((total) => {
              return `共 ${total} 条`;
            }),
          };
        const listcolumns = [
      {
        title: '设置内容',
        key: 'code',
        dataIndex: 'code',
        render: (text, record) => (
          <a className="clickable" onClick={() => this.handleUpdate(record)}>{text}</a>
        ),
        sorter: (a, b) => a.code > b.code ? 1 : -1
      },
      {
        title: '模块',
        dataIndex: 'type',
        key: 'type',
        sorter: (a, b) => a.type > b.type ? 1 : -1
      },
      {
        title: '值',
        dataIndex: 'value',
        key: 'value',
      },
      {
        title: '说明',
        dataIndex: 'message',
        key: 'message',
      },
    ];
    return (
  <ConfigProvider locale={zhCN}>
      {/*<div className="page-dashboard-list">*/}
        <div className="container">
          <PageHeader title="全局参数设置列表"/>
        </div>
      <Form layout="horizontal" {...{labelCol: { span: 4 }, wrapperCol: { span: 14 },} }>
          <Row>
				  <Col span={10}>
            <Form.Item style={{ marginBottom: 5 }} label="设置内容">
              <Input
                value={this.state.code}
                onChange={e => this.setState({code:e.target.value})}
                placeholder="设置内容"
                autoFocus
              />
						</Form.Item>
				  </Col>
				  <Col span={10}>
            <Form.Item style={{ marginBottom: 5 }} label="模块">
              <Input
                value={this.state.type}
                onChange={e => this.setState({type:e.target.value})}
                placeholder="模块"
              />
						</Form.Item>
				  </Col>
        </Row>
          <Row>
				  <Col span={10}>
          <Button type="primary" onClick={() => this.handlesel()} >
            <i className="fa fa-search m-r-5" />
            查询
          </Button>
				  </Col>
        </Row>
      </Form>
              <div>
                  <Table rowKey='id'
                          columns={listcolumns}
                          dataSource={this.state.data}
                          pagination={paginationProps}
                          loading={this.state.loading}
                          onChange={this.handleTableChange}
                  />
              </div>
  </ConfigProvider>
    );
  }
}

routes.register(
  "Globalsetting.List",
  routeWithUserSession({
    path: "/globalsetting",
    title: "全局参数设置",
    render: pageProps => <GlobalSettingList {...pageProps}/>,
  })
);
// export default [
//   routeWithUserSession({
//     path: "/globalsetting",
//     title: "全局参数设置",
//     render: pageProps => <GlobalSettingList {...pageProps} />,
//   }),
// ];
